document.addEventListener('DOMContentLoaded', function() {
    const generateBtn = document.getElementById('generate-btn');
    const revealBtn = document.getElementById('reveal-btn');
    const resetBtn = document.getElementById('reset-btn');
    const welcomeMessage = document.getElementById('welcome-message');
    const soupSurface = document.getElementById('soup-surface');
    const soupBottom = document.getElementById('soup-bottom');
    const soupTitle = document.getElementById('soup-title');
    const surfaceText = document.getElementById('surface-text');
    const bottomText = document.getElementById('bottom-text');
    
    let currentSoupId = null;
    
    // 生成海龟汤
    generateBtn.addEventListener('click', function() {
        fetch('/generate_soup')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                currentSoupId = data.id;
                soupTitle.textContent = data.title;
                surfaceText.textContent = data.surface;
                
                // 更新UI
                welcomeMessage.classList.add('hidden');
                soupSurface.classList.remove('hidden');
                soupBottom.classList.add('hidden');
                generateBtn.classList.add('hidden');
                revealBtn.classList.remove('hidden');
                
                // 添加淡入动画
                soupSurface.classList.add('fade-in');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('生成海龟汤时出错，请重试');
            });
    });
    
    // 揭示汤底
    revealBtn.addEventListener('click', function() {
        if (!currentSoupId) return;
        
        fetch('/reveal_bottom/' + currentSoupId)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                bottomText.textContent = data.bottom;
                
                // 更新UI
                soupBottom.classList.remove('hidden');
                revealBtn.classList.add('hidden');
                resetBtn.classList.remove('hidden');
                
                // 添加淡入动画
                soupBottom.classList.add('fade-in');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('获取汤底时出错，请重试');
            });
    });
    
    // 重置
    resetBtn.addEventListener('click', function() {
        // 重置UI
        welcomeMessage.classList.remove('hidden');
        soupSurface.classList.add('hidden');
        soupBottom.classList.add('hidden');
        generateBtn.classList.remove('hidden');
        revealBtn.classList.add('hidden');
        resetBtn.classList.add('hidden');
        
        currentSoupId = null;
    });
});